{include file="public/header"}
<title>案例详情</title>
<style>
  body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background-color: #fff;
  }
  /*头部*/
  .top{
    height: 60px;
    width: 100%;
    background:rgba(22,26,39,1);
  }
  .top_box{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    align-items: center;

  }
  .top_name_left{
    width:38px;
    height:38px;
    background:rgba(52,99,230,1);
    border-radius:10px;
    margin-right: 10px;
  }
  .top_name{
    height:60px;
    font-size:24px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:60px;
  }
  .top_name_r{
    width:76px;
    height:30px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,1);
    margin-left:26px;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .top_name_r img{
    height: 16px;
    width: 16px;
  }
  .top_name_r span{
    height:22px;
    line-height: 22px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin-left: 3px;
  }
  .lii{
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#84868D;
    line-height:22px;
    margin-right: 24px;
  }
  .white{
    color: #fff;
  }
  .top_login{
    margin-left: 36px;
    display: flex;
    align-items: center;
  }
  .top_login img{
    width: 28px;
    height: 28px;
  }
  .top_login span{
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:22px;
    margin-left: 8px;
  }
  .top_marginR{
    margin-right: 16px;
  }
  /*头部*/

  /*footer1样式*/
  .footer{
    width:100%;
    height:130px;
    background:rgba(31,31,31,1);
    display: flex;
    align-items: center;
  }
  .footer_in{
    width: 1210px;
    margin: 0 auto;
    height:18px;
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:18px;
  }
  /*footer1样式*/

  /*导航*/
  .content{
    width: 100%;
    background-color: #F5F5F6;
  }
  .navigation{
    width: 1200px;
    margin: 0 auto;
    height: 56px;
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
    display: flex;
    align-items: center;
  }
  .navigation img{
    height: 14px;
    width: 14px;
  }
  .navigation_title{
    width: 1200px;
    margin: 0 auto;
    height: 70px;
    margin-top: 10px;
    font-size:26px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  /*导航*/
  /*内容*/
  .contents{
    width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
  }
  .swiper_introduction{
    width: 430px;
    margin-left: 60px;
  }
  .swiper_introduction_title{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid  #EDEDED;
    align-items: center;
  }
  .swiper_introduction_title_num{
    font-size:42px;
    font-family:Helvetica-Bold;
    font-weight:bold;
    color:rgba(231,99,76,1);
    margin-right: 24px;
    display:table-cell; /*按照单元格的样式显示元素*/
    vertical-align:bottom; /*底对齐*/
    padding-bottom: 14px;
  }
  .swiper_introduction_title_num span{
    font-size:16px;
  }
  .swiper_introduction_title_num2{
    font-size:16px;
    font-family:Helvetica-Bold;
    color:rgba(51,51,51,1);
    padding-bottom: 20px;
  }
  .swiper_introduction_title_num2 span{
    font-weight:bold;
  }
  .swiper_introduction_title_coll{
    width: 100px;
    height:38px;
    border-radius:4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .swiper_introduction_title_coll img{
    height: 18px;
    width: 18px;
  }
  .swiper_introduction_title_coll span{

    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin-left: 3px;
    line-height:38px;
  }
  .swiper_introduction_con{
    padding-top: 20px;
    border-bottom: 1px solid #EDEDED;
    align-items: center;
  }
  .swiper_introduction_con span{
    margin-right: 15px;
  }
  .swiper_introduction_con span:last-child{
    margin-right: 0px;
  }
  .swiper_introduction_xin{
    padding: 20px 0;
    border-bottom: 1px solid #EDEDED;
  }
  .swiper_introduction_ci{
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 10px;
  }

  .iLeft {
    width: 70px;
    color: rgba(153, 153, 153, 1);
  }
  .swiper_introduction_tou{
    height: 60px;
    padding: 20px 0;
    display: flex;
    align-items: center;
  }
  .swiper_introduction_tou img{
    height: 60px;
    width: 60px;
    margin-right: 11px;
  }
  .swiper_introduction_tou span{
    font-size:22px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
  .swiper_introduction_tel{
    width:252px;
    height:46px;
    background:rgba(52,99,230,1);
    border-radius:4px;
    display: flex;
    align-items: center;
    font-size:22px;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(255,255,255,1);
  }
  .swiper_introduction_tel img{
    width: 22px;
    height: 22px;
    margin-right: 6px;
    margin-left: 30px;
  }

  .swiper_introduction_telonline{
    width:121px;
    height:44px;
    background:rgba(245,248,253,1);
    border-radius:4px;
    border:1px solid rgba(52,99,230,1);
    display: flex;
    align-items: center;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(90,137,234,1);
    margin-left: 10px;
  }
  .swiper_introduction_telonline img{
    width: 14px;
    height: 14px;
    margin-right: 5px;
    margin-left: 23px;
  }
  /*内容*/

  /*房源简介*/
  .house_det{
    margin: 94px 0 60px;
  }
  .house_det_title{
    margin-bottom: 20px;
    margin-top: 60px;
    font-size:23px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:32px;
  }
  .house_det_p{
    margin-bottom: 20px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:24px;
  }
  /*房源简介*/

  /*swiper2*/
  .swiper-containerrr{
    height: 360px;
    width: 1220px;
  }
  .swiper2{
    overflow: hidden;
    height: 360px;
    width: 1210px;
    margin-bottom: 70px;
  }
  .card{
    width:285px;
    height:331px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 6px 0px rgba(0,0,0,0.06);
    border-radius:4px;
    margin-right: 20px;
  }

  .card img{
    width: 100%;
    height: 213px;
    border-radius:4px 4px 0 0;
  }
  .card_word{
    width:257px;
    height:48px;
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:24px;
    margin: 20px 14px 6px;
    overflow: hidden;
  }
  .card_word2{
    height:24px;
  }
  .card_add{
    display: flex;
    align-items: center;
    margin: 0 14px;
  }
  .card_add_word{
    height:24px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:24px;
    margin-right: 10px;
  }
  .card_add_num{
    height:24px;
    font-size:16px;
    font-family:Helvetica-Bold;
    font-weight:bold;
    color:rgba(231,99,76,1);
    line-height:24px;
  }
  .swiper-button-prev2{
    height: 40px;
    width: 40px;
    background:rgba(0,0,0,0.4);
    border-radius:0px 4px 4px 0px;
    left: 0;
    top: 107px;
  }
  .swiper-button-prev2::after{
    content: ' ';
    height: 22px;
    width: 22px;
    position: absolute;
    left: calc(50% - 11px);
    top: calc(50% - 11px);
    background: url('__IMG__/back_left.png') no-repeat center center;
    background-size:22px 22px;
  }
  .swiper-button-next2{
    height: 40px;
    width: 40px;
    background:rgba(0,0,0,0.4);
    border-radius: 4px 0px 0px 4px;
    right: 20px;
    top: 107px;
  }
  .swiper-button-next2::after{
    content: ' ';
    height: 22px;
    width: 22px;
    position: absolute;
    left: calc(50% - 11px);
    top: calc(50% - 11px);
    background: url('__IMG__/back_right.png') no-repeat center center;
    background-size:22px 22px;
  }
  .card:hover{
    box-shadow:0px 10px 20px 0px rgba(0,0,0,0.08);
  }
  /*swiper2*/

  /*swiper1*/

  .swiper{
    height: 492px;
    width: 1200px;
  }
  .bgc{
    background-color: red;
    width: 100%;
    height: 400px;
  }
  .swiper-slide-img{
    width: 100%;
    height: 450px;
  }
  .swiper-slide-img1{
    width: 120px;!important;
    height: 84px;
  }
  #thumbs .swiper-slide{
    line-height:90px!important;
    opacity:0.4;
  }
  #thumbs .swiper-slide-thumb-active{
    opacity:1;
  }
  .swiper-containerr{
    width: 632px;
    margin-top: 4px;
    margin-left: 40px;
  }



  .swiper-button-prev1{
    height: 84px;
    width: 32px;
    background:rgba(51,51,51,1);
    left: 0;
    top: 480px;
  }
  .swiper-button-prev1::after{
    content: ' ';
    height: 22px;
    width: 22px;
    position: absolute;
    left: calc(50% - 11px);
    top: calc(50% - 11px);
    background: url('__IMG__/back_left.png') no-repeat center center;
    background-size:22px 22px;
  }
  .swiper-button-next1{
    height: 84px;
    width: 32px;
    background:rgba(51,51,51,1);
    right: 0px;
    top: 480px;
    z-index: 500;
  }
  .swiper-button-next1::after{
    content: ' ';
    height: 22px;
    width: 22px;
    position: absolute;
    left: calc(50% - 11px);
    top: calc(50% - 11px);
    background: url('__IMG__/back_right.png') no-repeat center center;
    background-size:22px 22px;
  }
  .swiper{
    position: relative;
  }
  /*swiper1*/
</style>
<style>
  .con_li_label{
    height: 30px;
    margin-top: 24px;
  }
  .con_li_labels{
    min-width: 60px;
    height:30px;
    background:rgba(230,237,255,1);
    border-radius:4px;
    margin-right: 10px;
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(53,86,179,1);
    line-height: 30px;
    text-align: center;
    padding: 0 10px;
  }
  .hidden{
    display: none;
  }
  .label {
    width: 60px;
    height: 30px;
    background: rgba(106, 182, 144, 1);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 30px;
    text-align: center;
  }
  .feture {
    display: inline-block;
    padding: 6px 10px;
    background: rgba(243, 245, 247, 1);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(136, 154, 172, 1);
    margin-right: 10px;
    margin-bottom: 20px;
  }
  .phone{
    width:252px;
    height:46px;
    background:rgba(106,182,144,1);
    border-radius:4px;
    font-size:22px;
    font-weight:600;
    color:rgba(255,255,255,1);
    align-items: center;
    margin-right:8px;
    margin-top:10px;
  }
  .call{
    width:22px;
    height:22px;
    margin-right:3px;
  }
  .message{
    width:121px;
    height:46px;
    background:rgba(235,250,242,0.6);
    border-radius:4px;
    border:1px solid rgba(106,182,144,1);
    font-size:14px;
    font-weight:400;
    color:rgba(106,182,144,1);
    align-items: center;
    margin-top:10px;
  }
  .mes{
    width:18px;
    height:18px;
  }
  .avatar{
    width:60px;
    height:60px;
    border-radius:30px;
    margin-right:18px;
  }
  .name{
    font-size:16px;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height: 60px;
    margin-right: 60px;
    /*margin-bottom:24px;*/
  }
</style>
  <body>
<div class="content">
  <div class="navigation">
    <span>置家优选</span>
    <img src="__IMG__/jiantou_right.png" alt="">
    <span>设计师案例</span>
    <img src="__IMG__/jiantou_right.png" alt="">
    <span>案例详情</span>
  </div>
  <div class="navigation_title">
    {$data.cc_title}
  </div>
</div>


<div class="contents flex-wrap">
    <div class="swiper">
      <div class="swiper-container"  id="gallery">
          <div class="swiper-wrapper">
            {volist name="$data['cc_image']" id='img'}
              <div class="swiper-slide"><img src="{$img}" alt="" class="swiper-slide-img" style="object-fit: fill;"></div>
            {/volist}
          </div>
      </div>

      <div class="swiper-container swiper-containerr"  id="thumbs">
          <div class="swiper-wrapper">
            {volist name="$data['cc_image']" id='img'}
            <div class="swiper-slide swiper-slide-img1"><img src="{$img}" alt="" class="swiper-slide-img1" style="object-fit: fill;"></div>
            {/volist}
          </div>
      </div>
      <div class="swiper-button-prev swiper-button-prev1" style="outline: none;"></div><!--左箭头-->
      <div class="swiper-button-next swiper-button-next1" style="outline: none;"></div><!--右箭头-->
    </div>

</div>



<div class="contents">

  <div class="house_det">
    <!---->
    <div class="house_det_p">
      <div class="flex-wrap">
        <div style="width: 20%;">
        <div class="flex-wrap">
          <img src="{$data.user_image}" class="avatar">
          <div class="name">{$data.user_username}</div>
        </div>
        </div>
        <div style="width: 30%;">
        <div class="message flex-wrap" onclick="gettalk({$data.user_id});">
          <div class="flex-con"></div>
          <img src="__IMG__/message.png" class="mes">
          <div>在线沟通</div>
          <div class="flex-con"></div>
        </div>
        </div>
        <div style="width: 50%;">
          <div style="float: right;width: 205px;height: 170px;margin-top: -20px;text-align: center;">
            <img src="{$data.user_ercode}" width="100" height="100" />
            <div style="line-height: 20px;height: 20px;font-size: 16px;text-align: center;width: 200px;">微信扫码打电话</div>
            <div style="line-height: 30px;height: 30px;font-size: 14px;text-align: center;width: 200px;color:gray;">扫码失败可拨打</div>
            <div style="line-height: 20px;height: 20px;font-size: 18px;text-align: center;width: 200px;color: orange;">{$jjrPhone}</div>
          </div>
        </div>

      </div>
    </div>
    <!---->
    <div class="house_det_title">
      案例介绍
    </div>
    <div class="house_det_p">
      {$data.cc_name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$data.cc_style}
    </div>
    <div class="house_det_p">
      {$data.cc_content}
    </div>

  </div>

</div>

{include file="public/wechat"}
{include file="public/foot1"}
  </body>
  </html>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="__JS__/swiper4.min.js"></script>
<script>
    // var mySwiper1 = new Swiper ('#swiper1', {
    //   direction: 'horizontal', // 垂直切换选项
    //   loop: true, // 循环模式选项
    //   autoplay:true,//等同于以下设置
    //   spaceBetween: 10,
    //   slidesPerView: 4,
    //   watchSlidesVisibility: true,//防止不可点击
    //
    // })
    var thumbsSwiper = new Swiper('#thumbs',{
        spaceBetween: 10,
        slidesPerView: 5,
        watchSlidesVisibility: true,

    })
    var gallerySwiper = new Swiper('#gallery',{
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: thumbsSwiper,
        }
    })
    var mySwiper2 = new Swiper ('#swiper2', {
        direction: 'horizontal', // 垂直切换选项
        loop: false, // 循环模式选项
        // autoplay:true,//等同于以下设置
        // autoplayDisableOnInteraction: false,
        slidesPerView : 4,
        navigation: {
            nextEl: '#swiper-button-next1',
            prevEl: '#swiper-button-prev1',
        },
    })
</script>

